<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #outer{
            width: 800px;
            height: 50px;
            border: 3px solid #ccc;
            margin: 50px auto 10px;

            position: relative;
        }

        #inner{
            width: 0%;
            height: 50px;
            background: skyblue;
        }

        #outer span{
            font-size: 25px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        button:first-of-type{
            margin-left: 160px;
        }
    </style>
</head>
<body>
    <!--  

    -->

    <div id="outer">
        <div id="inner"></div>
        <span></span>
    </div>
    <button onclick="start()">开始下载</button>
    <button onclick="stop()">暂停下载</button>

    <script>
        var inner = document.getElementById('inner');
        var content = document.getElementsByTagName('span')[0];
        var width = 0;  
        var timer;      
        var flag = true; 
        var btn1 = document.getElementsByTagName('button')[0];
        var btn2 = document.getElementsByTagName('button')[1];


        function start(){
            if(flag == true){
                flag = false;
                btn2.innerHTML = '暂停下载';
                timer = setInterval(function(){
                    if(width >= 100){
                        // 下载成功
                        clearInterval(timer);
                        alert('下载完成');

                        // 重置, 准备重新下载
                        btn1.innerHTML = '重新下载';
                        width = 0;
                        flag = true;
                        return;
                    }

                    // 进度递增
                    width++;
                    inner.style.width = width + '%';
                    content.innerHTML = width + '%';
                    
                }, 50);
            }
        }

        function stop(){
            if(flag == false){
                clearInterval(timer);
                flag = true;
                btn1.innerHTML = '继续下载';
            }
        }
    </script>



</body>
</html>